<template>
  <div>
      <div class="itemtext" :class='{textanimat:textflag}'>
          <p class="p1">
              全新首页
          </p>
          <p class="p2">
              精选美丽文章 让你美丽在线
          </p>
      </div>
      <div class="itemimg">
        <img class="img1" src="http://ot9lfn4ld.bkt.clouddn.com/lead1.png" alt="">
        <img @click="tip" class="img2" :class="{imganimat:textflag}" src="http://ot9lfn4ld.bkt.clouddn.com/leadm1.1.png" alt="">
      </div>
  </div>
</template>
<script>
export default {
  name:'swiperitem',
  data(){
    return {
        p1:'全新首页',
        p2:'精选美丽文章 让你美丽在线',
        img1:'http://ot9lfn4ld.bkt.clouddn.com/lead1.png',
        img2:'http://ot9lfn4ld.bkt.clouddn.com/lead1.png',
        imgflag:false
    }
  },
  methods:{
      tip(){
          
      }
  },
  created(){
      
  },
  props:{
      textflag:{
          type:Boolean,
          default:false
      }
  }
}
</script>
<style lang="less" scoped>
    @w:75rem;
    @keyframes textanimat{
        0%{top: -400/@w;}
        100%{top:0/@w}
    }
    @keyframes imganimat {
        0% {
            transform: scale(0.8);
           
            }
        100%{
            transform: scale(1);
            }
    }
    .itemtext {
        position: relative;
        top: -400/@w;
        font-size: 48/@w;
        padding: 0 150/@w;
        color: #fff;
        margin-bottom: 10/@w;
        margin-top: 160/@w;
        .p2 {
            font-size: 36/@w;
            margin-top: 10/@w;
        }
    }
    .textanimat{
        animation: textanimat 1.2s ease forwards;
    }
    .imganimat{
        animation: imganimat 1.2s ease forwards;
    }
    .itemimg {
        text-align: center;
        position: relative;
        width: 440/@w;
        margin: 0 auto;
        .img1 {
            width: 440/@w;
            height: 786/@w;

        }
        .img2 {
            width: 606/@w;
            position: absolute;
            top: 240/@w;
            left: -83/@w;
            
        }
    }
</style>


